<template>
	<view>
		<view class="content">
			<view class="contact_top">
				<view class="uploada" @click="addImage()">
					<image src="../../static/iocn8.png" v-if="src == 'https://syh-1.oss-cn-shanghai.aliyuncs.com/' || src == 'https://syh-1.oss-cn-shanghai.aliyuncs.com/undefined'"></image>
					<image :src="src" v-else></image>
				</view>
				<view class="image">
					<image src="../../static/iocn35.png"></image>
				</view>
			</view>
			<view class="contview">当前身份：{{list.roles}}</view>
			<view class="contact_key">
				<text>昵称</text>
				<input type="text" v-model="trueName" placeholder="请输入新昵称" />
			</view>

			<view class="section">
				<view class="section_top">已绑定手机号</view>
				<view class="section_box">
					<image src="../../static/iocn25.png"></image>
					<text>{{list.mobile}}</text>
				</view>
			</view>

			<view class="middle">
				<text>更换手机号</text>
				<input type="text" v-model="telphone" placeholder="请输入新手机号" />
			</view>
			<view class="middle">
				<text>短信验证码</text>
				<input type="text" v-model="veriCode" placeholder="请输入验证码" />
				<!-- <view @click="SendMobileCode()">验证码</view> -->
			</view>
			<view class="wrap">
				<u-toast ref="uToast"></u-toast>
				<u-code :seconds="seconds" @end="end" @start="start" ref="uCode" @change="codeChange"></u-code>
				<u-button @tap="getCode">{{tips}}</u-button>
			</view>
			
		</view>

		<view class="footer" @click="UserInfoUpdate()">保存</view>
		<view class="view_nav" v-show="jiazaizhong">
			<view><u-loading-icon size="50" color="#fff"></u-loading-icon></view>
		</view>
	</view>
</template>

<script>
	import {
		GetUserById,
		UserInfoUpdate,
		SendMobileCode,
		UpdateMobile,
		UserSimpUpdate
	} from '@/public/Api/update.js'
	import {
		setValue,
		getValue
	} from '@/public/storeage/index.js'
	export default {
		data() {
			return {
				list: [],
				src1: '', // 提交到后台的图片信息
				src: '', // 用来在前端展示的图片，如上面图片中显示的一样

				trueName: '',
				telphone: '',
				veriCode: '',

				result: '',



				tips: '',
				// refCode: null,
				seconds: 60,
				jiazaizhong:false
			};
		},
		onLoad() {
			this.GetUserById()
		},
		methods: {

			// 

			addImage() {
				var that = this;
				// let token = getValue('token')
				console.log(123)
				// 从本地相册选择图片或使用相机拍照。
				uni.chooseImage({
					count: 10, //最多可以选择的图片张数，默认9
					//album 从相册选图，camera 使用相机，默认二者都有。
					sourceType: ['album'],
					success: function(res) {
						//获取图片信息。
						uni.getImageInfo({
							src: res.tempFilePaths[0],
							success: function(image) {
								that.jiazaizhong = true
								// that.src = (res.tempFilePaths[0]);
								// console.log(that.src); //打印出图片信息,在浏览器上打开就是你上传的图片
								//将本地资源上传到开发者服务器，客户端发起一个 POST 请求，其中 content-type 为 multipart/form-data
								uni.uploadFile({
									//开发者服务器 url
									url: 'https://api.syh56.com:21026/api/UploadOSS',
									//获取要上传文件资源的路径。
									// filePath: res.tempFilePaths[0],
									filePath:res.tempFilePaths[0],
									//文件对应的 key , 开发者在服务器端通过这个 key 可以获取到文件二进制内容
									name: 'files',
									//HTTP 请求 Header, header 中不能设置 Referer。
									header: {
										'Abp.TenantId':'1',
									},
									//成功的回调fullurl
									success: uploadFileRes => {
										//获取图片信息 网站域名 + res1.data.url就是一个图片的完整路径了
										var res1 = JSON.parse(uploadFileRes.data);
										uni.setStorageSync('toxiang', res1.result); //道路许可证
										that.src = (res.tempFilePaths[0]);
										that.jiazaizhong = false
									}
								})
							}
						})
					}
				})
			},




			// 获取用户详情
			async GetUserById() {
				var id = getValue('id')
				try {
					const {
						data: res
					} = await GetUserById({
						id
					})
					this.list = res.result
					this.src = 'https://syh-1.oss-cn-shanghai.aliyuncs.com/' + res.result.avatar
					this.trueName = res.result.trueName
				} catch (e) {}
			},


			// 用户信息修改
			async UserInfoUpdate() {
				var avatar = getValue('toxiang')
				var trueName = this.trueName
				var mobile = this.telphone
				var result = this.result
				var veriCode = this.veriCode
				var id = getValue('id')
				if (trueName == '' || trueName==null) {
					uni.showToast({
						title: "真实姓名不能为空",
						icon: 'none',
						duration: 2000
					})
					return false
				}
				if (mobile == '' || mobile==null) {
					uni.showToast({
						title: "手机号不能为空",
						icon: 'none',
						duration: 2000
					})
					return false
				}				
				if (veriCode == '' || veriCode==null) {
					uni.showToast({
						title: "验证码不能为空",
						icon: 'none',
						duration: 2000
					})
					return false
				}
				
				try {
					await UserSimpUpdate({
						id,
						avatar,
						trueName,
						mobile,
						veriCode
					}).then((res)=>{
						var result = res.data.result;
						if(result.success){
							uni.showToast({
								title: "提交成功",
								icon: 'none',
							})
							setTimeout(function() {
								uni.reLaunch({
									url: '/pages/index/index'
								})
							}, 600)
						}
						else{
							uni.showToast({
								title: result.message,
								icon: 'none',
							})
						}
					})				
					
				} catch (e) {}
			},

			//  发送验证码
			async SendMobileCode() {
				var id = getValue('id')
				var mobile = this.telphone
				if (mobile == '') {
					uni.showToast({
						title: "手机号不能为空",
						icon: 'none',
						duration: 2000
					})
					return false
				}
				try {
					const {
						data: res
					} = await SendMobileCode({
						id,
						mobile
					})
					this.result = res.result
				} catch (e) {}
			},
			
			codeChange(text) {
				this.tips = text;
				console.log(text)
			},
			async getCode() {
				var id = getValue('id')
				var mobile = this.telphone
				if (mobile == '') {
					uni.showToast({
						title: "手机号不能为空",
						icon: 'none',
						duration: 2000
					})
					return false
				}
				if (this.$refs.uCode.canGetCode) {
					// 模拟向后端请求验证码
					uni.showLoading({
						title: '正在获取验证码'
					})
					try {
						const {
							data: res
						} = await SendMobileCode({
							id,
							mobile
						})
						this.result = res.result
					} catch (e) {}
					setTimeout(() => {
						uni.hideLoading();
						// 这里此提示会被this.start()方法中的提示覆盖
						uni.$u.toast('验证码已发送');
						// 通知验证码组件内部开始倒计时
						this.$refs.uCode.start();
					}, 2000);
				} else {
					uni.$u.toast('倒计时结束后再发送');
				}
			},
			end() {
				uni.$u.toast('倒计时结束');
			},
			start() {
				uni.$u.toast('倒计时开始');
			},
			

			//  更改手机号
			async UpdateMobile() {
				var id = getValue('id')
				var mobile = this.telphone
				var veriCode = this.veriCode
				if (veriCode == '') {
					uni.showToast({
						title: "验证码不能为空",
						icon: 'none',
						duration: 2000
					})
					return false
				}
				try {
					const {
						data: res
					} = await UpdateMobile({
						id,
						mobile,
						veriCode
					})
				} catch (e) {}
			},
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f7f7f7;
		padding: 20upx 15upx;
	}

	.content {
		width: 100%;
		border-radius: 17.52upx;
		background: #FFFFFF;
		box-shadow: 1.75upx 1.75upx 7.01upx 0px #cccccc, 1.75upx 1.75upx 7.01upx 0px #cccccc;
		padding: 25upx 40upx;
		margin-top: 90upx;

		.contact_top {
			width: 150upx;
			height: 150upx;
			margin: 0 auto;
			border-radius: 50%;
			position: relative;

			.uploada {
				margin-top: -80upx;

				image {
					width: 150upx;
					height: 150upx;
					border-radius: 50%;
				}
			}

			.image {
				width: 53upx;
				height: 53upx;
				position: absolute;
				bottom: 0;
				right: -20upx;

				image {
					width: 53upx;
					height: 53upx;
					display: block;
				}
			}
		}

		.contview {
			text-align: center;
			font-size: 28upx;
			font-weight: bold;
			padding-top: 20upx;
		}

		.contact_key {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding-top: 40upx;

			text {
				font-size: 32upx;
				font-weight: bold;
			}

			input {
				width: 540upx;
				height: 61upx;
				text-align: center;
				line-height: 61upx;
				background-color: #f7f7f7;
				font-size: 28upx;
			}
		}

		.section {
			padding-top: 40upx;
			padding-bottom: 20upx;

			.section_top {
				font-size: 31upx;
				font-weight: bold;
			}

			.section_box {
				display: flex;
				align-items: center;
				padding-top: 14upx;

				image {
					width: 28upx;
					height: 28upx;
				}

				text {
					font-size: 28upx;
					font-weight: bold;
					padding-left: 30upx;
				}
			}
		}

		.middle {
			width: 100%;
			height: 100upx;
			display: flex;
			align-items: center;
			border-top: 1upx solid #E5E5E5;

			text {
				font-size: 32upx;
				font-weight: bold;
				color: #000;
				text-align: left;
				width: 248upx;
			}

			input {
				font-size: 28upx;
				width: 300upx;
			}

		}
	}
			.wrap {
				// width: 103upx;
				// height: 46upx;
				border-radius: 10upx;
				text-align: center;
				line-height: 46upx;
				color: #fff;
				// background-color: #F04D3E;
				border: 1upx solid #F04D3E;
				font-size: 24upx;
				margin-top: 10upx;
			}
	.footer {
		width: 436upx;
		height: 72upx;
		border-radius: 15upx;
		background-color: #F04D3E;
		text-align: center;
		line-height: 72upx;
		font-weight: bold;
		color: #fff;
		font-size: 38upx;
		position: fixed;
		bottom: 50upx;
		left: 157upx;
	}
	
	.view_nav{
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.6);
		z-index: 9999;
		// v-show="jiazaizhong"
		display: flex;
		align-items: center;
		justify-content: center;
		// view{
		// 	display: flex;
		// 	align-items: center;
		// 	justify-content: center;
		// 	position: absolute;
		// 	top: 50%;
		// 	left: 50%;
		// 	transform: translate(-50%, -50%);
		// }
	}
</style>
